<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>左右选择窗口</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <link rel="stylesheet" href="./leftAndRightSelectTree.css">
    <script src="../../res/layui/layui.js"></script>
</head>
<body>

<!--选择树-->
<form class="layui-form">


    <!--表单内容-->
    <div class="layui-form-item">
        <label class="layui-form-label">城市：</label>
        <div class="layui-input-inline">
            <input id="selectedCityInput" type="text" class="layui-input" value="np,fz,xm,hz">
        </div>
        <div class="layui-form-mid" style="padding:0!important;">
            <button id="selectCityBtn" type="button" class="layui-btn layui-btn-primary">请选择</button>
        </div>
    </div>

    <!--弹窗内容-->
    <div id="selectCityDialog" style="display: none;width: 320px;height: 400px;margin: 0 auto;">
        <!--选择框-->
        <div class="clearfix">
            <!--左侧选择框-->
            <div style="float: left;border: 1px solid #ccc;width: 320px;">
                <div style="height: 300px;overflow-y: auto;padding: 10px;">
                    <div id="selectTree"></div>
                </div>
            </div>
        </div>

        <!--按钮框-->
        <div id="btnBox" style="text-align: right;margin-top: 10px">
            <span id="cancelBtn" class="layui-btn layui-btn-primary layui-btn-sm">取消</span>
            <span id="confirmBtn" class="layui-btn layui-btn-sm">确定</span>
        </div>
    </div>
</form>

<script>
    // 构建左侧选择树的数据
    var testData = [
        {
            "field": "sheng",
            "id": "fj",
            "title": "福建",
            "children": [{"field": "shi", "id": "np", "title": "南平"}, {"field": "shi", "id": "fz", "title": "福州"}, {"field": "shi", "id": "xm", "title": "厦门"}]
        },
        {
            "field": "sheng",
            "id": "zj",
            "title": "浙江",
            "children": [{"field": "shi", "id": "jh", "title": "金华"}, {"field": "shi", "id": "wz", "title": "温州"}, {"field": "shi", "id": "hz", "title": "杭州"}]
        },
        {
            "field": "sheng",
            "id": "gz",
            "title": "广州",
            "children": [{"field": "shi", "id": "dg", "title": "东莞"}, {"field": "shi", "id": "sz", "title": "深圳"}, {"field": "shi", "id": "zh", "title": "珠海"}]
        }
    ];

    layui.use(['jquery', 'layer', 'form', 'element', 'tree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var tree = layui.tree;


        // ======== 点击事件 ========


        /**
         * “请选择”按钮
         */
        $("#selectCityBtn").click(function () {
            // 1.渲染选择树
            var originalTreeData = getOriginalTreeData();
            renderSelectionTree(tree, originalTreeData);

            // 2.勾选节点
            var oldSelectedNodeData = getOldSelectedNodeData();
            tree.setChecked("citySelectTree", oldSelectedNodeData);

            // 3.显示弹窗
            showDialog();
        });

        /**
         * “取消”按钮
         */
        $("#cancelBtn").click(function () {
            // 关闭弹窗
            layer.close(layer.index);
        });

        /**
         * “确定”按钮
         */
        $("#confirmBtn").click(function () {
            // 1.获取数据
            var selectedProvince = tree.getChecked("citySelectTree");

            // 2.保存数据
            var cityArray = [];
            selectedProvince.forEach(province => {
                province.children.forEach(city => {
                    cityArray.push(city.id);
                });
            });
            $("#selectedCityInput").val(cityArray.join(","));

            // 3.关闭弹窗
            layer.close(layer.index);
        });


        // ======== 辅助方法 ========


        /**
         * 获取：构建选择树的原始数据
         */
        function getOriginalTreeData() {
            // TODO: 发送请求获取
            return testData;
        }

        /**
         * 获取：之前被勾选的节点信息
         */
        function getOldSelectedNodeData() {
            var selectedData = $("#selectedCityInput").val();
            if (selectedData == null || selectedData === '') {
                return [];
            }
            return selectedData.split(",");
        }

        /**
         * 获取：现在被勾选的节点信息
         */
        function getNewSelectedNodeData(tree) {
            var selectNodeData = tree.getChecked("citySelectTree");
        }

        /**
         * 渲染选择树
         */
        function renderSelectionTree(tree, selectedTreeData) {
            tree.render({
                id: "citySelectTree",
                elem: "#selectTree",
                showCheckbox: true,
                data: selectedTreeData
            });
        }

        /**
         * 显示弹窗
         */
        function showDialog() {
            layer.open({
                type: 1,
                title: "请选择城市",
                area: '330px',
                fixed: false,
                maxmin: true,
                content: $("#selectCityDialog")
            });
        }
    });

</script>

</body>
</html>
